<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单编号" prop="orderNo">
        <el-input
          v-model="queryParams.orderNo"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="商品名称" prop="productName">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.productName"-->
      <!--          placeholder="请输入商品名称"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
          <el-option
            v-for="dict in dict.type.order_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['business:order:add']"-->
<!--        >新增-->
<!--        </el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['business:order:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:order:remove']"
        >删除
        </el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="warning"-->
<!--          plain-->
<!--          icon="el-icon-download"-->
<!--          size="mini"-->
<!--          @click="handleExport"-->
<!--          v-hasPermi="['business:order:export']"-->
<!--        >导出-->
<!--        </el-button>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="未付款" name="1"></el-tab-pane>
      <el-tab-pane label="已付款" name="2"></el-tab-pane>
      <el-tab-pane label="已发货" name="3"></el-tab-pane>
      <el-tab-pane label="已收货" name="4"></el-tab-pane>
    </el-tabs>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="主键" align="center" prop="id"/>
      <el-table-column label="订单编号" align="center" prop="orderNo"/>
      <!--      <el-table-column label="商品名称" align="center" prop="productName" />-->
      <el-table-column label="用户姓名" align="center" prop="realName"/>
      <el-table-column label="用户电话" align="center" prop="userPhone"/>
      <el-table-column label="支付方式" align="center" prop="payType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.pay_type" :value="scope.row.payType"/>
        </template>
      </el-table-column>
      <el-table-column label="订单总价" align="center" prop="totalPrice"/>
      <el-table-column label="支付金额" align="center" prop="payPrice"/>
      <el-table-column label="商品总数" align="center" prop="totalNum"/>
      <el-table-column label="实际支付金额" align="center" prop="payPrice"/>
      <el-table-column label="优惠券金额" align="center" prop="couponPrice"/>
      <el-table-column label="使用积分" align="center" prop="useIntegral"/>
      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="checkStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.check_status" :value="scope.row.checkStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="orderTime" width="180">
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.orderTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="完成时间" align="center" prop="finallyTime" width="180">
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.finallyTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="取消时间" align="center" prop="cancelTime" width="180">
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.cancelTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="支付时间" align="center" prop="payTime" width="180">
<!--        <template slot-scope="scope">-->
<!--          <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="是否支付" align="center" prop="isPayed">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.is_no" :value="scope.row.isPayed"/>
        </template>
      </el-table-column>
      <!--      <el-table-column label="退款状态  0:默认,1:在处理,2:处理完成" align="center" prop="refundStatus" />-->
      <!--      <el-table-column label="是否退款  0 未退款  1 已退款" align="center" prop="isRefund" />-->

      <!--      <el-table-column label="给用户退了多少积分" align="center" prop="backIntegral" />-->
      <!--      <el-table-column label="退款金额" align="center" prop="refundPrice" />-->
      <el-table-column label="订单关闭原因" align="center" prop="closeType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.close_type" :value="scope.row.closeType"/>
        </template>
      </el-table-column>

      <el-table-column label="用户地址" align="center" prop="userAddress"/>
      <!--      <el-table-column label="优惠券id" align="center" prop="couponId" />-->

      <!--      <el-table-column label="拼团活动Id" align="center" prop="ptActiveId" />-->
      <!--      <el-table-column label="秒杀活动Id" align="center" prop="seckillId" />-->
      <!--      <el-table-column label="拼团Id" align="center" prop="pinkId" />-->
      <!--      <el-table-column label="抵扣金额" align="center" prop="dkPrice" />-->

      <!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['business:order:edit']"-->
<!--          >修改-->
<!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleView(scope.row)"
          >查看
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.orderStatus=='2' "
            @click="sendhandle(scope.row)"
          >发货
          </el-button>


          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.payType=='3'  && scope.row.checkStatus!='2' "
            @click="checkUpdate(scope.row)"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['business:order:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderNo">
              <el-input v-model="form.orderNo" placeholder="请输入订单编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="订单总价" prop="totalPrice">
              <el-input v-model="form.totalPrice" placeholder="请输入订单总价"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单商品总数" prop="totalNum">
              <el-input v-model="form.totalNum" placeholder="请输入订单商品总数"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="实际支付金额" prop="payPrice">
              <el-input v-model="form.payPrice" placeholder="请输入实际支付金额"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠券金额" prop="couponPrice">
              <el-input v-model="form.couponPrice" placeholder="请输入优惠券金额"/>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="form.orderStatus" placeholder="请选择订单状态">
                <el-option
                  v-for="dict in dict.type.order_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="使用积分" prop="useIntegral">
              <el-input v-model="form.useIntegral" placeholder="请输入使用积分"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="支付类型" prop="payType">
              <el-select v-model="form.payType" placeholder="请选择支付类型">
                <el-option
                  v-for="dict in dict.type.pay_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否已经支付" prop="isPayed">
              <el-select v-model="form.isPayed" placeholder="请选择是否已经支付">
                <el-option
                  v-for="dict in dict.type.is_no"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="下单时间" prop="orderTime">
              <el-date-picker clearable
                              v-model="form.orderTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择下单时间"
              >
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="支付时间" prop="payTime">
              <el-date-picker clearable
                              v-model="form.payTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择支付时间"
              >
              </el-date-picker>
            </el-form-item>

          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="取消时间" prop="cancelTime">
              <el-date-picker clearable
                              v-model="form.cancelTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择取消时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="完成时间" prop="finallyTime">
              <el-date-picker clearable
                              v-model="form.finallyTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择完成时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-divider content-position="center">发货信息</el-divider>


        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="发货时间" prop="sendTime">
              <el-date-picker clearable
                              v-model="form.sendTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择下单时间"
              >
              </el-date-picker>
            </el-form-item>

          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="快递公司" prop="expressName">
              <el-input v-model="form.expressName" placeholder="请输入快递公司"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递单号" prop="expressNo">
              <el-input v-model="form.expressNo" placeholder="请输入快递单号"/>
            </el-form-item>
          </el-col>
        </el-row>


        <!--        <el-form-item label="商品名称" prop="productName">-->
        <!--          <el-input v-model="form.productName" placeholder="请输入商品名称" />-->
        <!--        </el-form-item>-->


        <!--        <el-form-item label="是否退款  0 未退款  1 已退款" prop="isRefund">-->
        <!--          <el-input v-model="form.isRefund" placeholder="请输入是否退款  0 未退款  1 已退款" />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="给用户退了多少积分" prop="backIntegral">-->
        <!--          <el-input v-model="form.backIntegral" placeholder="请输入给用户退了多少积分" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="退款金额" prop="refundPrice">-->
        <!--          <el-input v-model="form.refundPrice" placeholder="请输入退款金额" />-->
        <!--        </el-form-item>-->

        <el-divider content-position="center">地址信息</el-divider>
        <el-form-item label="用户姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="请输入用户姓名"/>
        </el-form-item>
        <el-form-item label="用户电话" prop="userPhone">
          <el-input v-model="form.userPhone" placeholder="请输入用户电话"/>
        </el-form-item>
        <el-form-item label="用户地址" prop="userAddress">
          <el-input v-model="form.userAddress" placeholder="请输入用户地址"/>
        </el-form-item>
        <el-divider content-position="center">打款信息</el-divider>
<!--        <el-form-item label="对公账户信息" prop="bankInfo">-->
<!--          <el-input v-model="form.bankInfo" type="textarea" placeholder="请输入对公账户信息"/>-->
<!--        </el-form-item>-->
        <el-form-item label="打款凭证" prop="bankPayImage">
          <image-upload v-model="form.bankPayImage"/>
        </el-form-item>
        <!--        <el-form-item label="优惠券id" prop="couponId">-->
        <!--          <el-input v-model="form.couponId" placeholder="请输入优惠券id" />-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="拼团活动Id" prop="ptActiveId">-->
        <!--          <el-input v-model="form.ptActiveId" placeholder="请输入拼团活动Id" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="秒杀活动Id" prop="seckillId">-->
        <!--          <el-input v-model="form.seckillId" placeholder="请输入秒杀活动Id" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="拼团Id" prop="pinkId">-->
        <!--          <el-input v-model="form.pinkId" placeholder="请输入拼团Id" />-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="抵扣金额" prop="dkPrice">-->
        <!--          <el-input v-model="form.dkPrice" placeholder="请输入抵扣金额" />-->
        <!--        </el-form-item>-->
<!--        <el-form-item label="备注" prop="remark">-->
<!--          <el-input v-model="form.remark" placeholder="请输入备注"/>-->
<!--        </el-form-item>-->


        <el-divider content-position="center">订单明细</el-divider>
        <Orderitem :order-no="form.orderNo" ></Orderitem>
      </el-form>
      <div slot="footer" class="dialog-footer">
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="sendopen" width="800px" append-to-body>
      <el-form ref="sendform" :model="sendform" :rules="sendrules" label-width="120px">
        <el-form-item label="快递公司" prop="expressName">
          <el-input v-model="sendform.expressName" placeholder="请输入快递公司"/>
        </el-form-item>
        <el-form-item label="快递单号" prop="expressNo">
          <el-input v-model="sendform.expressNo" placeholder="请输入快递单号"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSendForm">确 定</el-button>
        <el-button @click="sendcancel">取 消</el-button>
      </div>

    </el-dialog>
    <check-oper ref="checkform"></check-oper>
  </div>
</template>
<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder,updateSendOrderArrival } from '@/api/business/order'
import  Orderitem  from  '@/components/Orderitem/index'
import CheckOper from '@/components/CheckOper'
export default {
  name: 'Order',
  dicts: ['order_status', 'is_no', 'pay_type', 'close_type','check_status'],
  components: { Orderitem ,CheckOper},

  data() {
    return {
      activeName: '',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      sendopen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderNo: null,
        productName: null,
        userId: null,
        totalPrice: null,
        totalNum: null,
        payPrice: null,
        orderStatus: null,
        orderTime: null,
        finallyTime: null,
        cancelTime: null,
        payTime: null,
        isPayed: null,
        refundStatus: null,
        isRefund: null,
        useIntegral: null,
        backIntegral: null,
        refundPrice: null,
        closeType: null,
        realName: null,
        userPhone: null,
        userAddress: null,
        couponId: null,
        couponPrice: null,
        ptActiveId: null,
        seckillId: null,
        pinkId: null,
        dkPrice: null,
        payType: null
      },
      // 表单参数
      form: {},
      sendform: {
        id: null,
        expressName: null,
        expressNo: null,
       },
      // 表单校验
      rules: {},
      sendrules:{
        expressName: [
          { required: true, message: "请输入快递公司名称", trigger: "blur" }
        ],
        expressNo: [
          { required: true, message: "请输入快递单号", trigger: "blur" }
        ],

      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(tab, event) {
      this.queryParams.orderStatus = tab.name
      this.getList()
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    sendcancel(){
      this.sendopen =false
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        orderNo: null,
        productName: null,
        userId: null,
        totalPrice: null,
        totalNum: null,
        payPrice: null,
        orderStatus: null,
        orderTime: null,
        finallyTime: null,
        cancelTime: null,
        payTime: null,
        isPayed: null,
        refundStatus: null,
        isRefund: null,
        useIntegral: null,
        backIntegral: null,
        refundPrice: null,
        closeType: null,
        realName: null,
        userPhone: null,
        userAddress: null,
        couponId: null,
        couponPrice: null,
        ptActiveId: null,
        seckillId: null,
        pinkId: null,
        dkPrice: null,
        payType: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加订单'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getOrder(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改订单'
      })
    },
    /** 修改按钮操作 */
    handleView(row) {
      this.reset()
      const id = row.id || this.ids
      getOrder(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '查看订单'
      })
    },
    sendhandle(row){
      // 发货
      this.sendform.id = row.id
      this.sendopen = true


    },
    checkUpdate(row) {
      // 审核
      const id = row.id || this.ids
      this.$refs.checkform.initCs('v3/bankSqCheckPay', id, '审核')
    },
    submitSendForm(){
      this.$refs["sendform"].validate(valid => {
        if (valid) {
          updateSendOrderArrival(this.sendform).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.sendopen = false
            this.getList()
          })
        }
      });

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateOrder(this.form).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addOrder(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除订单编号为"' + ids + '"的数据项？').then(function() {
        return delOrder(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('business/order/export', {
        ...this.queryParams
      }, `order_${new Date().getTime()}.xlsx`)
    }
  }
}
</script>
